<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<title>下拉功能</title>
		<link rel="stylesheet" href="css/weui.css" />
		<link rel="stylesheet" href="css/example.css" />
	</head>

	<body>
		<div class="page" style="overflow: hidden">
			<div class="hd">
				<h1 class="page_title">ActionSheet</h1>
			</div>
			<div class="bd spacing">
				<a href="javascript:;" class="weui_btn weui_btn_primary" id="showActionSheet">点击上拉ActionSheet</a>
			</div>
			<!--BEGIN actionSheet-->
			<div id="actionSheet_wrap">
				<div class="weui_mask_transition" id="mask"></div>
				<div class="weui_actionsheet" id="weui_actionsheet">
					<div class="weui_actionsheet_menu">
						<div class="weui_actionsheet_cell">示例菜单</div>
						<div class="weui_actionsheet_cell">示例菜单</div>
						<div class="weui_actionsheet_cell">示例菜单</div>
						<div class="weui_actionsheet_cell">示例菜单</div>
					</div>
					<div class="weui_actionsheet_action">
						<div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
					</div>
				</div>
			</div>
			<!--END actionSheet-->
		</div>
	</body>
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#showActionSheet').on('click',function(e){
				var mask = $('#mask');
                    var weuiActionsheet = $('#weui_actionsheet');
                    weuiActionsheet.addClass('weui_actionsheet_toggle');
                    mask.show().addClass('weui_fade_toggle').click(function () {
                        hideActionSheet(weuiActionsheet, mask);
                    });
                    $('#actionsheet_cancel').click(function () {
                        hideActionSheet(weuiActionsheet, mask);
                    });
                    weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');

                    function hideActionSheet(weuiActionsheet, mask) {
                        weuiActionsheet.removeClass('weui_actionsheet_toggle');
                        mask.removeClass('weui_fade_toggle');
                        weuiActionsheet.on('transitionend', function () {
                            mask.hide();
                        }).on('webkitTransitionEnd', function () {
                            mask.hide();
                        })
                    }
			})
		})
	</script>

</html>